<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>短信模板创建</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">
	<link href="<%=path%>/hplus/css/plugins/clockpicker/clockpicker.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css">
    <link href="<%=path%>/bm/css/s_style.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/cropper/cropper.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/nouslider/jquery.nouislider.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/ionRangeSlider/ion.rangeSlider.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/ionRangeSlider/ion.rangeSlider.skinFlat.css" rel="stylesheet">
    <style> 
        .radio label{
            padding-left: 0;
        }

        .date{
            margin: -8px 20px 0 0;
        }

        .clockpicker{
            margin-top: -8px;
        }

        .i-checks label{
            float: left;
            margin-right: 10px;
        }

        .col-sm-offset-1{
            margin-top: 20px;
        }

        .tishi{
            margin-top: 7px;
            
        }

        .alert{
            position:absolute;
            top: -15px;
            left: 8%;
            display:none;
        }
        .text-center{
            width:50%;
            margin: 10px 0 20px;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
       
        <div class="ibox-content">
            <div class="text-center"><h3>模板编辑器</h3></div>
            <form method="get" class="form-horizontal">
            
                 <div class="form-group">
                    <label class="col-sm-1 control-label" data-toggle="modal" data-target="#myModal5">模板类型</label>
                    <div class="col-sm-5">
                        <select id="modelType" class="form-control" name="account" onchange="reloadCountWordNum()">
                            <option value="sales_service">售后服务</option>
                            <option value="smart_market">智能营销</option>
                        </select>
                    </div>
                    <div hidden="" class="tishi col-sm-6" style="position:relative;margin-left:-15px">
                        <img src="<%=path%>/bm/images/help.png" />
                        <div class="col-sm-4 alert alert-success">
                            	如果没有签名，请联系您的售后人员。<!-- <a class="alert-link" href="notifications.html#">了解更多</a> -->
                        </div>
                    </div>                    
                </div>
            
                <div class="form-group">
                    <label class="col-sm-1 control-label">模板名称</label>
                    <div class="col-sm-5">
                        <input id="name" type="text" class="form-control" placeholder="请输入模板名称" maxlength="15" onblur="checkLength(this)">
                    </div>
                </div>

                 <div class="form-group">
                    <label class="col-sm-1 control-label" data-toggle="modal" data-target="#myModal5">短信签名</label>
                    <div class="col-sm-5">
                        <select id="autograph" class="form-control" name="account" onchange="reloadCountWordNum()">
                            <option>zhfeat</option>
                            <option>选项 2</option>
                            <option>选项 3</option>
                            <option>选项 4</option>
                        </select>
                    </div>
                    <div class="tishi col-sm-6" style="position:relative;margin-left:-15px">
                        <img src="<%=path%>/bm/images/help.png" />
                        <div class="col-sm-4 alert alert-success">
                            	如果没有签名，请联系您的售后人员。<!-- <a class="alert-link" href="notifications.html#">了解更多</a> -->
                        </div>
                    </div>                    
                </div>
                <div class="form-group">
                  <label class="col-sm-1 control-label">模板内容</label>
                  <div class="input-group m-b col-sm-2" style="padding-left:15px;float:left;">
	                  <span class="input-group-addon">变量</span>
	                  <select id="variableSelect" class="form-control" name="account" onchange="reloadCountWordNum()">
	                      <option value="无">无</option>
				          <option selected="" value="customerName">会员名称</option>
				          <option value="tradeName">商品名称</option>
				          <option value="tradeExplain">商品说明</option>
				          <option value="buyTime">购买时间</option>
				          <option value="buyNum">购买数量</option>
				           <option value="NameAndNum">商品+数量</option>
	                  </select> 
	                  <span class="input-group-addon"><i id="addVariables" class="fa fa-plus"></i></span>
                  </div>
                  <div class="input-group m-b col-sm-2" style="padding-left:15px;float:left;">
	                  <span class="input-group-addon">链接</span>
	                  <select id="urlSelect" class="form-control" name="account" onchange="reloadCountWordNum()">
		                  <option value="attributeUrl">属性说明</option>
		                  <option value="appraiseUrl">药终评价</option>
		                  <option value="explainUrl">商品说明</option>
	                  </select> 
	                  <span class="input-group-addon"><i id="addUrl" class="fa fa-plus"></i></span>
                  </div>
                  <div class="col-sm-1" style="margin-top:8px;margin-left:20px;">
                  <a  data-toggle="modal" href="<%=path%>/api/bm/ui/modalSmsModel" data-target="#model_modal">导入模板</a>
                  </div>
                </div>
                   
                <div class="form-group">
                   <label class="col-sm-1 control-label" style="visibility: hidden">模板内容</label>
                    <div class="col-sm-5" style="margin-top:-30px;">                      
                        <textarea oninput="reloadCountWordNum()" id="ccomment" name="comment" class="form-control" required="" aria-required="true" style="height:150px;"></textarea>                       
	                    <div hidden="" class=" text-right"> 
	                       <h6 class="col-sm-9 "></h6> <span class="text-right" id="current">70</span><span>/</span><span id="remain" class="text-left">0</span><span>条</span>
	                    </div>
                    </div>
                     <div hidden="" class="tishi col-sm-6" style="position:relative;margin-left:-15px">
                        <img src="<%=path%>/bm/images/help.png" />
                        <div class="col-sm-4 alert alert-success">
                                                                                       短信默认70字符，含回复TD退订及签名字符，如选择活动，默认扣除19个短链字符！
                        </div>
                    </div>      
                </div>
                
                <div class="form-group">
                    <div class="col-sm-2 col-sm-offset-2">
                        <button onclick="javascript:cancelDialog();" type="button" class="btn btn-outline btn-primary" style="margin-right:20px;">取消</button>
                        <button onclick="javascript:save();" type="button" class="btn btn-primary">保存</button>
                    </div>
                </div>                
            </form>
        </div>    
    </div>

    <div hidden="" class="modal inmodal fade" id="myModal5" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header" style="padding: 15px 15px 10px;">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="text-left">提示</h4>
                </div>
                <div class="text-center" style="width:100%;height:60px;">
                    <p>您还没有签名，请创建签名</p>
                    <form method="get" class="form-horizontal col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">短信签名</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control">
                            </div>
                        </div>
                    </form>
                </div>
                 <div class="modal-footer" style="text-align:center;border-top:none;">
                     <button type="button" class="btn btn-primary k_verify">提交审核</button>
                 </div>
             </div>
        </div>
    </div> 


   
    <div class="modal inmodal fade" id="model_modal" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
               
            </div>
        </div>
    </div>
    <script src="<%=path%>/hplus/js/jquery.min.js?v=2.1.4"></script>
    <script src="<%=path%>/hplus/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="<%=path%>/hplus/js/content.min.js?v=1.0.0"></script>
    <script src="<%=path%>/hplus/js/plugins/chosen/chosen.jquery.js"></script>
    <script src="<%=path%>/hplus/js/plugins/jsKnob/jquery.knob.js"></script>
    <script src="<%=path%>/hplus/js/plugins/jasny/jasny-bootstrap.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script src="<%=path%>/hplus/js/plugins/prettyfile/bootstrap-prettyfile.js"></script>
    <script src="<%=path%>/hplus/js/plugins/switchery/switchery.js"></script>
    <script src="<%=path%>/hplus/js/plugins/ionRangeSlider/ion.rangeSlider.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/iCheck/icheck.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="<%=path%>/hplus/js/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/clockpicker/clockpicker.js"></script>
    <script src="<%=path%>/hplus/js/plugins/cropper/cropper.min.js"></script>
    
    <script src="<%=path%>/hplus/js/demo/form-advanced-demo.min.js"></script>
	<script src="<%=path%>/hplus/js/plugins/suggest/bootstrap-suggest.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/lengthlimit.js"></script>
	

<script type="text/javascript" src="<%=path%>/js/marketing/dialog.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
	   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<script type="text/javascript">
		function refreshContent(){
			console.log(shortUrl);
			var newContent="";
			var content=$('#ccomment').val();
			console.log("content-->"+content);
			var splitContent=content.split(shortUrl);
			for(var i=0;i<splitContent.length;i++){
				if(splitContent[i]!=shortUrl){
					newContent=newContent+splitContent[i];
				}
			}
			console.log("newContent-->"+newContent);
			$('#ccomment').text(newContent);
			shortUrl="";
			reloadCountWordNum();
		}
		
		$('#addVariables').on('click',function(){
			var variables=$("#variableSelect  option:selected").val();
			$("#ccomment").val($("#ccomment").val()+'['+variables+']');
			reloadCountWordNum();
		});
		
        $('#addUrl').on('click',function(){
        	var url=$("#urlSelect  option:selected").val();
        	$("#ccomment").val($("#ccomment").val()+'['+url+']');
        	reloadCountWordNum();
		});
	
	
	</script>
	
	
    <script>
        //$(document).ready(function(){$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",})});
       
        var access_token=$.cookie('access_token');
    	var cid=$.cookie('cid');
    	var uid=$.cookie('uid');
        
       var modelName;
       var modelType;
       var contentType;
       var content;
       var autograph_id;
       var id;
       var modelId=0;
        
        $(function(){
            $('.tishi img').mouseover(function(){
                $(this).parent().find('.alert').show();
            });
            $('.tishi img').mouseout(function(){
                $(this).parent().find('.alert').hide();
            });
            id=getQueryString("id");
            type=getQueryString("type");
            copyId=getQueryString("copyId");
            
            if(type=="edit"){
            	getModelData(id);
            }else{
            	getAutographList();
            }
           
        })
        
        
        //获取短信数据
        function getModelData(id){
        	var url="<%=path%>/smsModel/ajaxSmsModelDetail";
    		$.post(url, {
    			"access_token" : access_token,
    			"cid" : cid,
    			"uid" : uid,
    			"id" : id,
    		}, function(data) {
    			
    			if (data.status == 200) {
    				initHtml(data.data);
    			}else if(data.error_code=="20028"){
	        		loginDialog();
	        	}else{
	        		errorDialog(data.message);
	        	}
    		});
        }
       
        //初始化页面
        function initHtml(data){
             modelName=data.name;
             modelType=data.type;
             contentType=data.content_type;
             content=data.content;
             autograph_id=data.autograph_id;
             id=data.id;
             modelId=data.id;
        	
        	$("#name").val(modelName);
        	$("#ccomment").text(content);
        	reloadCountWordNum();
        	getAutographList();
        	
        }
        
        
        //获取标签列表
        function getAutographList(){
        	var url="<%=path%>/smsAutograph/ajaxAutographList";
    		$.post(url, {
    			"access_token" : access_token,
    			"cid" : cid,
    			"uid" : uid,
    			"id" : id,
    		}, function(data) {
    			
    			if (data.status == 200) {
    				setAutographHtml(data.data);
    			}else if(data.error_code=="20028"){
	        		loginDialog();
	        	}else{
        		  swal(
        				"获取短信签名失败",
        				"您还未设置短信签名，请联系您的售后人员创建短信签名，然后再来设置短信模板！",
            		    'error'
            		  ).then(function () {
            			  window.location.href='<%=path%>/api/bm/ui/smsModelHome';
            		})
	        	}
    		});
        }
        
        //设置签名
        function setAutographHtml(data){
        	console.log("autograph_id---->"+autograph_id);
        	var html='';
        	for(var i in data){
        		if(data[i].id==autograph_id){
        			html+='<option value="'+data[i].id+'" selected = "selected">'+data[i].name+'</option>'
        		}else{
        			html+='<option value='+data[i].id+'>'+data[i].name+'</option>'
        		}
        	}
        	$('#autograph').html(html);
        }
        
        function save(){
        	modelName=$('#name').val();
        	content=$('#ccomment').val();
        	autograph_id=$("#autograph  option:selected").val();
        	modelType=$("#modelType  option:selected").val();
        	contentType=handleContentType(content);
        	console.log("contentType22---->"+contentType);
        	console.log("content33---->"+content);
        	if(StringEmpty(modelName)&&StringEmpty(content)){
        		if(type=="create"){
        			create();
        		}else{
        			update(id);
        		}
        		
        	}else if(!StringEmpty(modelName)){
        		promptDialog("请输入模板名称");
        	}else if(!StringEmpty(content)){
        		promptDialog("请输入模板内容");
        	}
        	
        }
        function create(id){
        	console.log("contentType---->"+contentType);
        	var url="<%=path%>/smsModel/ajaxCreateSmsModel";
    		$.post(url, {
    			"access_token" : access_token,
    			"cid" : cid,
    			"uid" : uid,
    			"name" : modelName,
    			"content" : content,
    			"contentType" : contentType,
    			"type" : modelType,
    			"autographId" : autograph_id,
    			"isShow" : 1,
    		}, function(data) {
    			
    			if (data.status == 200) {
    				OKDialog("创建模板成功");
    			}else if(data.error_code=="20028"){
	        		loginDialog();
	        	}else{
	        		errorDialog(data.message);
	        	}
    		});
        }
        
        function update(id){
        	var url="<%=path%>/smsModel/ajaxUpdateSmsModel";
    		$.post(url, {
    			"access_token" : access_token,
    			"cid" : cid,
    			"uid" : uid,
    			"id" : id,
    			"name" : modelName,
    			"content" : content,
    			"contentType" : contentType,
    			"type" : modelType,
    			"autographId" : autograph_id,
    		}, function(data) {
    			
    			if (data.status == 200) {
    				OKDialog("保存成功");
    			}else if(data.error_code=="20028"){
	        		loginDialog();
	        	}else{
	        		errorDialog(data.message);
	        	}
    		});
        }
        
        function handleContentType(content){
        	
        	if(isHaveStr(content,"appraiseUrl")){
        		contentType="end_care_remind";
        	}else if(isHaveStr(content,"explainUrl")){
        		contentType="buy_medicine_remind";
        	}else if(isHaveStr(content,"attributeUrl")){
        		contentType="attribute_explain";
        	}
        	return contentType;
        }
        /* function isHaveStr(content,str){
        	console.log("content.indexOf(str)--->"+content.indexOf(str));
        	if(content.indexOf(str) > 0 ){
        		return true;
            } else{
            	return false;
            }
        } */
        
        function cancelDialog(){
			swal({
				  title: '您确定要离开吗',
				  text: "离开后您编辑的内容将无法保存！",
				  type: 'warning',
				  showCancelButton: true,
				  confirmButtonColor: '#d33',
				  cancelButtonColor: '#3085d6',
				  confirmButtonText: '是',
				  cancelButtonText:'否'
				}).then(function () {
					window.location.href='<%=path%>/api/bm/ui/smsModelHome';
				})
		}
        
        
        function OKDialog(title,content){
        	swal(
        		    title,
        		    content,
        		    'success'
        		  ).then(function () {
        			  window.location.href='<%=path%>/api/bm/ui/smsModelHome';
        			})
        }
        
        
        var wordLength=0;
        var smsPriceNum=1;
        //当前
        var current;
        //剩余
        var remain;
        
        var initLength=6;
        
        var shortUrl;
        var sms_content;
        var autograph_name;
        //更新新短信输入数量 
        function reloadCountWordNum(){
        	initLength=6;
        	autograph_name=$("#autograph  option:selected").text();
        	initLength=initLength+autograph_name.length+2;
        	sms_content=$('#ccomment').val();
        	wordLength=sms_content.length;
        	console.log("initLnegth--->"+initLength);
        	console.log(wordLength);
        	if(smsPriceNum==1){
        		smsPriceNum=parseInt(((wordLength/(70-initLength))+1));
        	}else{
        		smsPriceNum=parseInt((((wordLength+initLength)/70)+1));
        	}
        	$('#remain').html(smsPriceNum);
        	if(smsPriceNum==1){
        		current=(70-initLength)-(wordLength%70);
        	}else{
        		current=70-((wordLength+initLength)%70);
        	}
        	
        	$('#current').html(current);
        }
        
        function determineModel(){
        	$(".select_one .checked .childCheckbox1").each(
        			function(i, d) {
        				var modelContent = $(this).attr("modelContent");
        				$('#ccomment').val(modelContent);
        	});
        	$('#model_modal').modal('hide');
        }
      
        function colseModelModal(){
        	$('#model_modal').modal('hide');
        }
       
       
    </script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</body>
</html>
